<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	    <title>个人中心</title>
		
	    <!-- Bootstrap -->
	    <link href="/hoyo/css/bootstrap.min.css" rel="stylesheet">
	    <link href="/hoyo/css/mine.css" rel="stylesheet" />
	    <style>
	    	body{
	    		background-color: #f1f3f7;
	    	}
	    	#data-nav{
	    		margin-bottom: 0px;
	    	}
	    	.user-center-ul{
	    		list-style-type: none;
	    		padding: 0;
	    		margin: 0;
	    	}
	    	.center-icon{
	    		display: inline-block;
	    		height: 48px;
	    		vertical-align: top;
	    	}
	    	.center-icon-c{
	    		margin-top: 13px;
	    		width: 20px;
	    		height:20px;
	    	}
	    	.user-center-left{
	    		background-color: #FFFFFF;
	    		box-shadow: #c7ced1 0 0 5px;
	    		border-top-left-radius: 6px;
	    		border-bottom-left-radius: 6px;
	    		height: 766px;
	    	}
	    	.user-center-ul li{
	    		display: block;
	    		height: 48px;
	    	}
	    	.user-center-ul li a{
	    		text-align: center;
	    		display:block;
	    		display: block;
	    		text-align: center;
	    		cursor: pointer;
	    		color: #2D2D2D;
	    	}
	    	.user-center-ul li a:hover{
	    		text-decoration: none;
	    		color: currentcolor;
	    	}
	    	.center-title{
	    		line-height: 48px;
	    		display: inline-block;
	    		width: 56px;
	    		margin-left: 12px;
	    		font-family: "微软雅黑";
	    		font-size: 14px;
	    	}
	    	.center-li-active a{
	    		background-color: #00a1d7 !important;
	    		color: #fff !important;
	    	}
	    	.user-center-right{
	    		background-color: #FFFFFF;
	    		box-shadow: #c7ced1 0 0 5px;
	    		padding: 50px 20px 5px 20px;
	    		height:766px;
	    	}
	    	.touxiang{
	    		width:64px;
	    		height: 64px;
	    	}
	    	.user-info-touxiang{
	    		display: inline-block;
	    	}
	    	.h-div{
	    		font-size: 16px;
	    		font-weight: 700;
	    		color: #222222;
	    		margin-right: 8px;
	    		cursor: default;
	    		font-family: "微软雅黑";
	    		height: 24px;
	    		line-height: 24px;
	    		overflow: hidden;
	    	}
	    	.user-detail{
	    		padding-bottom: 40px !important;
	    		margin-left:20px !important;
	    		margin-right:20px !important;
	    		border-bottom: 1px solid #e5e9ef;	   
	    	}
	    	.clear{
	    		margin: 0;
	    		padding: 0;
	    	}
	    	.user-info{
	    		text-align: center;
	    	}
	    	.exp-progress{
	    		height: 24px;
	    		margin-top: 10px;
	    	}
	    	.user-btn{
	    		font-family: "微软雅黑";
	    		color: #99A2AA;
	    		padding: 0px 10px;
	    	}
	    	.h-intro{
	    		margin-top: 6px;
	    		font-size: 12px;
	    		width: 600px;
	    		height: 20px;
	    		line-height: 20px;
	    		color: #99A2AA;
	    	}
	    	.list{
		      	list-style-type: none;
		      	margin: 0;
		      	padding: 0;
		    }
		    .my-img{
		      	width: 150px;
		      	height: 110px;
		     }
		    .mtitle{
		      	height: 20px;
		      	line-height: 20px;
		      	text-decoration: none;
		      	display: block;
		      	overflow: hidden;
		      	margin-top: 6px;
		      	font-size: 12px;
		      	font-family: "微软雅黑";
		    }
		    .mtitle:hover{
		      	color: #00a1d6;
		    }
		    .data-md-5{
	    		width:20%;
	    		padding-bottom: 15px;
	    		padding-left: 0px;
	    	}
		    .v-info{
		      	padding-top: 12px;
		      	font-size: 12px;
		      	font-family: "微软雅黑";
		      	color: #99A2AA;
		    }
		    .v-info-icon{
		      	margin-right: 10px;
		      	margin-left: 5px;
		    }
		    .v-info-uploader{
		      	margin-top: 6px;
		    }
		    .mine-movie{
		    	margin: 20px 20px;
		    	padding-bottom: 20px;
		    	border-bottom: 1px solid #e5e9ef;	
		    	min-height:350px;
		    }
		    .mine-movie-title{
		    	display: inline-block;
		    	margin-right: 10px;
		    }
		    .mine-movie-icon{
		    	width: 24px;
		    	height: 24px;
		    	margin-top: 3px;
		    }
		    .upload-movie-header{
		    	height: 30px;
		    }
		    .upload-movie-title{
		    	height:30px;
		    	line-height: 30px;
		    	display: inline-block;
		    	font-family: "微软雅黑";
		    	vertical-align: top;
		    }
		    .movie-title-info{
		    	height:30px;
		    	line-height: 30px;
		    	font-family: "微软雅黑";
		    	font-size: 12px;
		    	color: #99A2AA;
		    	display: inline-block;
		    	vertical-align: top;
		    }
		    .mine-btn{
		    	vertical-align: top;
		    	font-size: 12px;
		    	color: #99A2AA;
		    }
		    .right{
		    	float: right;
		    	margin-right: 50px;
		    }
		    .upload-movie-header{
		    	margin-top: 10px;
		    	margin-bottom: 20px;
		    }
		    .telephone-icon{
		    	width: 60px;
		    	height: 60px;
		    }
		    .icon-banner{
		    	vertical-align: top;
		    	display: inline-block;
		    	margin: 10px 15px;
		    }
		    .icon-intro{
		    	display: inline-block;
		    	font-family: "微软雅黑";
		    	margin-top: 10px;
		    }
		    .table-title{
		    	display: inline-block;
		    	width: 460px;
		    	height: 30px;
		    	line-height: 30px;
		    	overflow: hidden;
		    }
		    #upload-table tr td{
		    	font-family: "微软雅黑";
		    	height: 30px;
		    	line-height: 30px;
		    	overflow: hidden;
		    	font-size: 14px;
		    }
		    .mine-safe{
		    	margin: 20px 20px;
		    	padding-bottom: 20px;
		    }
		    .glyphicon{
		    	margin-left: 6px;
		    }
		    .upload-movie-div{
		    	
		    }
		    .none-data{
		    	text-align: center;
		    	padding-top: 60px;
		    }
		    .none-data p{
		    	padding-bottom: 10px;
		    }
	    </style>
	</head>
	<body>
		
			
		<div id="data-nav" class="navbar">
			<div class="container">
		  	<div class="navbar-header">
		      <a class="navbar-brand" href="/hoyo/">
		      	<img src="/hoyo/img/logo.png" class="data-img"/>
		      	<span class="data-span">主页</span>
		      </a>
		    </div>
		
	      <ul id="contributor" class="nav navbar-nav navbar-right">
	      	<li>
	      		<a class="data-user" href="/hoyo/user/personalCenter">
	      			<img th:src="${session.userInfo.icon}" class="data-img img-circle" />
	      			<span class="nav-user-name" th:text="${session.userInfo.nickname}">iscream</span>
	      		</a>
	      	</li>
	        <li class="dropdown">
	          <a href="/hoyo/upload" class="dropdown-toggle data-color">投稿</a>
	      	</li>
		  </div>
		</div>
		
		
		
		<div class="container-fluid" style="background-color: #00a0d8;margin-bottom: 50px;">
			<div class="container">
				<img src="/hoyo/img/login-bc.png" />
			</div>
		</div>
		<div class="container">
			<div class="col-lg-2 clear">
				<div class="user-center-left">
					<ul class="user-center-ul">
						<li  class="center-li-active">
							<a href="/hoyo/user/personalCenter">
								<div class="center-icon">
									<svg class="icon center-icon-c" aria-hidden="true">
									  <use xlink:href="#icon-shouye"></use>
									</svg>
								</div>
								<span class="center-title">首&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;页</span>
							</a>
						</li>
						<li>
							<a href="/hoyo/user/personInfo">
								<div class="center-icon">
									<svg class="icon center-icon-c" aria-hidden="true">
									  <use xlink:href="#icon-geren"></use>
									</svg>
								</div>
								<span class="center-title">我的信息</span>
							</a>
						</li>
						<li>
							<a href="/hoyo/user/modifyicon">
								<div class="center-icon">
									<svg class="icon center-icon-c" aria-hidden="true">
									  <use xlink:href="#icon-8"></use>
									</svg>
								</div>
								<span class="center-title">我的头像</span>
							</a>
						</li>
						<li>
							<a href="/hoyo/user/userLikeCatalog">
								<div class="center-icon">
									<svg class="icon center-icon-c" aria-hidden="true">
									  <use xlink:href="#icon-shoucang2"></use>
									</svg>
								</div>
								<span class="center-title">我的收藏</span>
							</a>
						</li>
						<li>
							<a href="/hoyo/user/safeCenter">
								<div class="center-icon">
									<svg class="icon center-icon-c" aria-hidden="true">
									  <use xlink:href="#icon-anquan"></use>
									</svg>
								</div>
								<span class="center-title">账号安全</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="col-lg-10 clear">
				<div class="user-center-right">
					<div class="user-detail row clear">
						<div class="user-info col-lg-1">
							<div class="user-info-touxiang">
								<img class="img-circle touxiang" th:src="${session.userInfo.icon}"  />
							</div>
						</div>
						<div class="home-info-right col-lg-11 ">
							<div style="margin-top: 10px;">
								<div class="h-div" th:text="${session.userInfo.nickname}">用户名</div>
								<div class="row clear exp-progress">
									<div class="progress col-lg-7 clear">
									  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"  th:style="'width:'+${session.userInfo.exp/10}+'%;'">
									  </div>
									</div>
									<div class="col-lg-2 col-lg-offset-3">
										<a href="/hoyo/user/personInfo" class="btn btn-default btn-sm user-btn">修改资料</a>
									</div>
								</div>
								<div class="h-intro" th:if="${session.userInfo.description}!=null"  th:text="${session.userInfo.description}">
									简介
								</div>
								<div class="h-intro" th:unless="${session.userInfo.description}!=null">
									这个人很懒，什么都没留下~~~
								</div>
							</div>
						</div>
					</div>
					<div class="row mine-movie clear">
						<div class="upload-movie-header">
							<div class="mine-movie-title">
								<svg class="icon mine-movie-icon" aria-hidden="true">
								  <use xlink:href="#icon-weibiaoti3-copy"></use>
								</svg>
							</div>
							<span class="upload-movie-title">我的投稿</span>
							<span class="movie-title-info right">最近三天的投稿视频<span class="glyphicon glyphicon-menu-down"></span></span>
						</div>
						<div class="upload-movie-div">
							<!--<ul class="list">
								<li>
									<div class="col-lg-2 data-md-5">
								 		 <a href="#" target="_blank">
								 		 	<img src="img/test-bc.jpg" class="img-rounded my-img"/>
								 		 </a>
								 		 <a href="#" target="_blank" class="mtitle">
								 		 	【4月】夏目友人帐 第六季 07人帐 第六季 07人帐 第六季 07人帐 第六季 07
								 		 </a>
								 	</div>
								</li>
							</ul>-->
							<div class="none-data" th:if='${#lists.size(cataLog)<=0}'>
								<p>最近三天内你还没有投过一个稿件("▔□▔)</p>
								<a href="/hoyo/upload" class="btn btn-hg btn-info">马上投稿</a>
							</div>
							<table class="table table-condensed" id="upload-table" th:if='${#lists.size(cataLog)>0}'>
								<tr>
									<th style="width: 460px;">标题</th>
									<th>频道</th>
									<th>上传时间</th>
									<th>状态</th>
								</tr>
								
								<tr th:each="catalog,userStat:${cataLog}">
									<td class="table-title" th:text="${catalog.catalogName}">账号安全</td>
									<td th:text="${catalog.channelName}">频道</td>
									<td th:text="${#calendars.format(catalog.createTime, 'yyyy-MM-dd HH:mm:ss')}">2016-04-12 15:12:52</td>
									<td th:if="${catalog.isChecked}">已通过</td>
									<td th:unless="${catalog.isChecked}">审核中</td>
								</tr>
							</table>
						</div>
					</div>
					<div class="row mine-safe clear">
						<div class="upload-movie-header">
							<div class="mine-movie-title">
								<svg class="icon mine-movie-icon" aria-hidden="true">
								  <use xlink:href="#icon-anquan1"></use>
								</svg>
							</div>
							<span class="upload-movie-title">账号安全</span>
						</div>
						<div class="upload-movie-div">
							<div class="icon-banner">
								<svg class="icon telephone-icon" aria-hidden="true">
								  <use xlink:href="#icon-shouji"></use>
								</svg>
							</div>
							<div class="icon-intro">
								<p style="font-size: 16px;">我的手机</p>
								<p style="font-size: 12px;color: #99A2AA;">绑定手机即可使用手机号登录</p>
								<a href="/hoyo/user/modifytele" class="btn btn-default btn-sm">更换手机</a>
							</div>	
						</div>
					</div>
				</div>
				</div>
				
			</div>	
		</div>
		
	</body>
	<script src="/hoyo/js/jquery-3.2.1.min.js"></script>
    <script src="/hoyo/js/bootstrap.min.js"></script>
    <script src="/hoyo/js/vue.js"></script>
    <script src="/hoyo/js/iconfont.js"></script>
</html>
